Dickson College Home | Library | Wiki Tips

Dickson College Library: Wiki Tips

Tables | Text | Links - New page | Paragraph Hang Indents | Sound | Backup | Anchors | Footer | Centering and Blockquotes | Boxes

The following links go to Wiki Tips 2:
Maths - EdNA Insert | Search Box on Home Page | Litguides Drop Down Boxes | Dictionary | iframe | biblioe | Maps | Print Friendly Page

Images: URL address if needed for for example when embedding a concept map: http://dckclib.wikispaces.com/file/view/file name
e.g.: http://dckclib.wikispaces.com/file/view/arts1a.jpg

Includes
Blockquotes:
[[include page="HTML_blockquote_open"]]
(quote text goes here)
[[include page="HTML_blockquote_close"]]

Centering text
[[include page="HTML_div_center_open"]] and for closing: [[include page="HTML_div_close"]]

Paragraphs:
[[include page="HTML_p_hangindent"]] - 1st line on margin, rest in 3em.
[[include page="HTML_p_hangindent3"]] - All lines in 3em.
[[include page="HTML_p_hangindent6"]] - 1st line in 3em, rest 6em.
[[include page="HTML_p_hangindentno"]] - All lines on margin - use this to set margin back.

Boxes for titles:
[[include page="HTML_boxopen"]] and for closing: [[include page="HTML_div_close"]]

Pagefooter:
[[include page="include_pagefooter"]] - page footer - at end of page


Tables
No Lines Showing:
In Manage Space / Look and Feel / Change or make a new theme / Current theme - edit. The following text has been added to the theme to stop table lines from showing: .wiki table td { border: 0px; }

To put lines in tables back, use Insert Widget and Other HTML:
<script language="JavaScript" type="text/javascript">
document.write('<style type="text/css">.wiki table td { border: 1px solid black; }</style>')
</script>

Can change the colour, width, etc. Can only put one type of table on a page - the last one will overwrite the previous ones.
The following is used on the Search Tools Page (blue edges, padding space in cells:
<script language="JavaScript" type="text/javascript">
document.write('<style type="text/css">.wiki table td { border: 1px solid #2d3380; padding: 1em; }</style>')
</script>

This code hides the lines in any table on the page. Use in a wiki which hasn't had the theme changed.
<script language="JavaScript" type="text/javascript">
document.write('<style type="text/css">.wiki table td { border: 0px; }</style>')
</script>
Can insert a column and add a blank image the width of a space you want to add to spread columns apart (when lines don't show).

Table		|| table cell || table cell || table cell ||
Table Heading Cell		||~ heading1 ||~ heading2 ||~ heading3 ||
Table Cell Alignment		||= centered ||> right ||> right||
Table Column Spans (merging columns together)		|||| spans 2 columns || col3 ||
Instead of		|| col1 || col2 || col3 ||

Text
Preventing wikitext: use the character under the ~: escaping

Indenting text: >(space) or >>(space) in front of a line. E.g.:

• This line is indented using >(space)
  • This line is indented using >>(space)

Note: Can also use the include statements for the paragraph hanging indents.

Headings: = or == or ===. Bold: **. Italics: //. Underline: _. Line: ----
Link examples: [[pagename]], [[pagename|label]], http://some.url, [[http://some.url|label]], [[image:name.jpg]], [[file:name.txt]], [[#anchor]]
Source Code: [[code]] ... [[code]]

Mathematics: [[math]] ... [[math]]

Changing text colour:
For the Navigation Menu the text colour is changed in the "Look and Feel".
In Manage Space / Look and Feel / Change or make a new theme / Current theme - edit, I added "color: #224494 " to change the text color in the body of the page, to become

body { background-color: <$WikiBackgroundColor$>; font-family: arial,helvetica,sans-serif; font-size: 83%; margin: 0; padding: 0; color: #224494; }

Centering text:
Use Insert Widget, other html:
<script language="JavaScript">
document.write('<div style="text-align: center;">')
</script>
add the text you want centered, then
<script language="JavaScript">
document.write('</div>')
</script>
or (better) use [[include page="HTML_div_center_open"]] and for closing: [[include page="HTML_div_close"]]


Links - New Page
To get a link to open a new page and the link doesn't show the green arrow - need to add the text in Insert Widget (change the URL and link name):
<a href="http://www.schools.ash.org.au/dckc/reforder/contents.html" target=_blank>Reference Orders</a>


Paragraphs - Hang Indents
The 3 sets of scripts below have been made into individual pages with titles as above. Paste the include contents of the double brackets to the start of the paragraph you want to indent. Examples follow.

HTML_p_hangindent (name of file the include looks at)
<script language="JavaScript">
document.write('<p style="text-indent: -3em; margin-left: 3em">')
</script>
[[include page="HTML_p_hangindent"]]
This is the start of a hanging indent paragraph - 1st line on margin, rest indented 3em. This is the start of a hanging indent paragraph - 1st line on margin, rest indented 3em. This is the start of a hanging indent paragraph - 1st line on margin, rest indented 3em.

HTML_p_hangindent3
<script language="JavaScript">
document.write('<p style="margin-left: 3em">')
</script>
[[include page="HTML_p_hangindent3"]]
Whole of a paragraph which is indented 3em. Whole of a paragraph which is indented 3em. Whole of a paragraph which is indented 3em. Whole of a paragraph which is indented 3em. Whole of a paragraph which is indented 3em.

HTML_p_hangindent6
<script language="JavaScript">
document.write('<p style="text-indent: -3em; margin-left: 6em">')
</script>
[[include page="HTML_p_hangindent6"]]
1st line of a paragraph is indented 3em rest 6em - use for bibliographies. 1st line of a paragraph is indented 3em rest 6em - use for bibliographies. 1st line of a paragraph is indented 3em rest 6em - use for bibliographies.

HTML_p_hangindentno
<script language="JavaScript">
document.write('<p style="text-indent: 0em; margin-left: 0em">')
</script>
[[include page="HTML_p_hangindentno"]]
Puts the paragraph back on the margin. Use to stop the next paragraph being indented. Puts the paragraph back on the margin. Use to stop the next paragraph being indented.


Sound
Imbed a sound mp3 file with the format:
<embed src="phone.mp3" width="200" height="20" autostart="false" loop="false" playcount="1">
Playcount (Explorer) - set no. of times want the file played.
Loop (Navigator) - set to false, true or n.
Autostart - for the track to start "true", when arrow clicked "false"
Optimal width - 144, optimal height - 60
align="_TOP", BOTTOM, CENTER, BASELINE, LEFT, RIGHT, TEXTTOP, MIDDLE, ABSMIDDLE, or ABSBOTTOM


Backup
Look for "How to set up folders" tutorials for Windows, MACs and Linux at: https://www.wikispaces.com/help+webdav .
We are in the "Plus" Subscription Level and so can only "Retrieve the contents of pages, files, and previous page versions under history".
Keep a folder on your computer to backup to. Drag the pages and files into the folder. They have the text at that time so if the space is deleted it can be rebuilt using the data from these pages. Doesn't include what is in the navigation menu so should make a new text file to copy the text over (open it in edit navigation and click the text editor - save this version with all the coding and links). Keep copies of images and files in here, too.
The URL for Web Folders (WebDAV) access in this wikispace is: https://dckclib.wikispaces.com/space/dav
For a Mac, from desktop click Go and Connect to Server, then https://dckclib.wikispaces.com/space/dav and follow login prompts.


Anchors
In text editor position cursor where you want the anchor and then add: [[#anchorname]]
The anchor name needs to be the same as the link at the top of the page which would be of the form: [[wikitips#ancorname|Link shown]]

From Wikispaces Help:
Anchors have 2 parts.

Part 1: The anchor point. i.e. The place you are linking to.
1. Go to the part of the page where you want the link to jump to (usually located farther down the page).
2. Type in Type the brackets and the # sign. Replace nameoftheanchor with the actual text you want to be the name of the anchor. In the examples above, we use .

Part 2: The link.
1. At the top of the page (or wherever you want your anchor link list to appear), highlight the text that you want to use as your link.
2. Click on the link button in the toolbar (it looks like a globe). For Page Name, select the name of the page you want to link to. This is most often going to be the page you are currently working on.
3. Click the "Link to anchor?" link, which will then display a box into which you can type the anchor name. So in the example above, you would type the word apples in to the Anchor box, since this is what you put inside the anchor code in Part 1.



Include - Footer
See : http://sealwyf.wikispaces.com/Sandbox014
[[include page="include_pagefooter"]] has been added into the template page with 2 square brackets on either side. This is what needs to be added to each page if the template isn't used. Don't need to add it in a widget, just copy the text straight in.

It uses HTML_div_pagefooter_open and HTML_div_close and the following lines of text which are in the dckctheme:
.wiki div.pagefooter { width: 90%; margin: 10px auto 10px 30px; text-align: center;
font-size: .85em; background-color: #f6f6f6; color: #666666; border: 3px double #cccccc;
clear: right; }
.wiki div.pagefooter a { text-decoration: none; color: #000099; }

HTML_div_pagefooter_open has (inserted in a widget):
[[include page="HTML_div_pagefooter_open"]]Created: {$creationday}/{$creationmonth}/{$creationyear} | Last updated: {$revisionday}/{$revisionmonth}/{$revisionyear} | URL: {$server}/{$page}
[[{$server}/{$page|url}?f=print|Print this page]] | [[{$server}/tag/cloud|tag cloud]]
[[include page="HTML_div_close"]]

and HTML_div_close has (inserted in a widget):
<script language="JavaScript" type="text/javascript">
document.write('</div>')
</script>




Include - Centering and Blockquotes
These pages, which center text, will be used several times.

Add: [[include page="HTML_div_center_open"]] where you want text centered
and then for closing: [[include page="HTML_div_close"]]

Page name: HTML_div_center_open
<script language="JavaScript">
document.write('<div style="text-align: center;">')
</script>

Page name: HTML_div_close

<script language="JavaScript">
document.write('</div>')
</script>

The HTML tags to be inserted are <blockquote> and </blockquote>. Here are the tags in their JavaScript wrappers:

<script language="JavaScript">
document.write('<blockquote>')
</script>

and

<script language="JavaScript">
document.write('</blockquote>')
</script>

HTML_blockquote_open and HTML_blockquote_close, with the <blockquote> and </blockquote> JavaScript-wrapped tags on them. If you look at the pages, the codes are invisible; they may even mess up other things on the wiki page, since they aren't closed! But the pages aren't there to be looked at. They are there to be used in include statements.

Here are the include statements that will create a blockquote:

[[include page="HTML_blockquote_open"]]
(quote text goes here)
[[include page="HTML_blockquote_close"]]




Boxes
A single box as used in the above heading:

In Manage Space / Look and Feel / Change or make a new theme / Current theme - edit. The following text has been added to make the boxes as above:
.wiki div.bluebox { width: 90%; margin: 0px auto 0px 0px; border: 1px solid #999999; padding: 5px; background-color: #efefef; }
It says blue box but the color was changed to #efefef - a light beige.
Duplicate this line with different background colours and border colours, widths, etc. Change the bluebox to something else.
From the visual editor, Insert Widget, html: you need to add the following text each time on a different page (can copy and paste if on the same page):

<script language="JavaScript">
document.write('<div class="bluebox">')
</script>

Then type the contents of the box followed by the closing div (use Insert Widget again)

<script language="JavaScript">
document.write('</div>')
</script>

Use This
Instead of inserting the widgets to open and close a box you can use the include statements:
[[include page="HTML_boxopen"]] and for closing: [[include page="HTML_div_close"]]
(There is a page called HTML_boxopen which has the bluebox code inserted as a widget and the closing div is called HTML_div_close.


To put a box straight into the page without using the stylesheet, add through an Insert Widget, (change the colour of the background and line):

<script language="JavaScript">
document.write('<div style="width: 90%; margin: 10px auto 10px 30px;
border: 1px solid #9999aa; padding: 10px; background-color: #ffffdd;">')
</script>

add the text and finish with:

<script language="JavaScript">
document.write('</div>')
</script>

Created: 6/7/2008 | Last updated: 18/8/2010 | URL: https://dckclib.wikispaces.com/wikitips
Email: info@dicksonc.act.edu.au | Privacy Policy | Disclaimer | Copyright | Print this page | Tag cloud